<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/element-ui/element-ui.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <link href="/static/css/common-component.css" rel="stylesheet"/>
    <link href="/static/css/common-element-plus.css" rel="stylesheet"/>
    <link href="/static/css/common_biz.css" rel="stylesheet"/>

    <title>数据库管理</title>
    <style>
    </style>
</head>
<body class="skin-default">
<div id="app" class="qy-view-page-app">
    <el-scrollbar view-class="qy-el-scrollbar-height-p100">
        <div class="qy-view-page-content">

            <!-- 查询条件 -->
            <div id="qy-view-search-bar" class="qy-view-search-bar qy-height-resize">
                <div class="qy-view-search-condition-bar">
                    <el-form :inline="true" :model="searchCondition">
                        <el-form-item label="主键">
                            <el-input v-model="searchCondition.id" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="登录时间">
                            <el-date-picker v-model="searchCondition.loginTime" type="date" format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"></el-date-picker>
                            &nbsp;~&nbsp;
                            <el-date-picker v-model="searchCondition.loginTime2" type="date" format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="list_search"><i class="fa fa-search"
                                                                              aria-hidden="true"></i>&nbsp;查询
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>


            <!-- 按钮区 -->
            <div id="qy-view-button-bar" class="qy-view-button-bar qy-height-resize">
                <el-button type="primary" plain
                           size="default"
                           @click="addFormIns.command.open()"

                >新增
                </el-button>
<!--                <el-button type="danger" plain-->
<!--                           size="default"-->
<!--                           @click="list_delete_batch"-->

<!--                >删除-->
<!--                </el-button>-->
                <el-button type="warning" plain
                           size="default"
                           @click="reloadPage"

                >刷新
                </el-button>
            </div>

            <!-- 数据表格 -->
            <div id="qy-view-data-bar" class="qy-view-data-bar qy-height-resize">
                <jo-el-table :url="tableDataUrl" :ref="joTableRef" :search-param="searchCondition"
                             first-column="checkbox" :page-size="10" :enable-loading="true">
                    <template #default="scope">
                        <el-table :ref="tableRef" :data="scope.data" header-cell-class-name="jo-el-table-header"
                                  :max-height="tableHeight">
                            <el-table-column type="selection" prop="selection" width="50" fixed="left" label="#"
                                             header-align="center" align="center"></el-table-column>
                            <el-table-column prop="tableName" label="表名" min-width="180"
                                             :sortable="true"></el-table-column>
                            <el-table-column prop="tableComment" label="表说明" min-width="180"
                                             :sortable="true"></el-table-column>
                            <el-table-column prop="tableRows" label="数据量" min-width="100" header-align="right"
                                             align="right" :sortable="true"></el-table-column>
                            <el-table-column prop="dataLength" label="数据大小" min-width="100" header-align="right"
                                             :formatter="formatDataLength"
                                             align="right" :sortable="true">
                            </el-table-column>
                            <el-table-column label="操作" width="140" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" link
                                               size="default"
                                               @click="list_edit(scope.row)"

                                    >详情
                                    </el-button>
<!--                                    <el-divider direction="vertical"></el-divider>-->
<!--                                    <el-button type="danger" link-->
<!--                                               size="default"-->
<!--                                               @click="list_delete(scope.row)"-->

<!--                                    >删除-->
<!--                                    </el-button>-->
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </jo-el-table>
            </div>

        </div>


        <!--加载数据库字段类型字典-->
        <jo-el-data url="/lowcode/db/getDbColumnTypeList" bind-root-name="dbColumnTypeList"></jo-el-data>

        <!--新增表单-->
        <jo-el-dialog-form :instance="addFormIns"
                           :title="formTitle" :width="formWidth"
                           label-position="right" label-width="100px" :rules="checkRules"
                           @ok="addTable"
        >
            <template #default="scope">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="表名" prop="tableName">
                            <el-input v-model="scope.data.tableName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="表说明" prop="tableComment">
                            <el-input v-model="scope.data.tableComment" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-table :data="scope.data.columnList" :max-height="tableHeight - 280"
                                  header-cell-class-name="jo-el-table-header">
                            <el-table-column type="index" prop="selection" width="50" fixed="left" label="#"
                                             header-align="center" align="center"></el-table-column>
                            <el-table-column prop="columnName" label="字段名" min-width="180"
                                             fixed="left">
                                <template #default="scope">
                                    <el-input v-model="scope.row.columnName" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" label="备注" min-width="180">
                                <template #default="scope">
                                    <el-input v-model="scope.row.remark" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="dataType" label="类型" min-width="110">
                                <template #default="scope">
                                    <el-select v-model="scope.row.dataType" :allow-create="true" :filterable="true">
                                        <el-option :value="col.key" v-for="col in dbColumnTypeList">{{col.value}}
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column prop="length" label="长度" min-width="80">
                                <template #default="scope">
                                    <el-input v-model="scope.row.length" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="columnDefault" label="默认值" min-width="130">
                                <template #default="scope">
                                    <el-input v-model="scope.row.columnDefault" placeholder=""></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="notNull" label="非空" min-width="80">
                                <template #default="scope">
                                    <el-switch
                                            v-model="scope.row.notNull"
                                            :active-value="1"
                                            :inactive-value="0"
                                    ></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="primaryKeyFlag" label="主键" min-width="80">
                                <template #default="scope">
                                    <el-switch
                                            v-model="scope.row.primaryKeyFlag"
                                            :active-value="true"
                                            :inactive-value="false"
                                    ></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="autoIncrement" label="自增" min-width="80">
                                <template #default="scope">
                                    <el-switch
                                            v-model="scope.row.autoIncrement"
                                            :active-value="1"
                                            :inactive-value="0"
                                    ></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="130" fixed="right">
                                <template #default="scope">
                                    <el-button type="primary" link
                                               size="default"
                                               @click="addColumnData(scope.$index)"

                                    >
                                        <i class="fa fa-plus"></i>
                                    </el-button>
                                    <el-divider direction="vertical"></el-divider>
                                    <el-button type="danger" link
                                               size="default"
                                               @click="removeColumn(scope.$index)"

                                    >
                                        <i class="fa fa-minus"></i>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--                        <div style="text-align: center;padding: 10px;">-->
                        <!--                            <el-button link type="primary" @click="addColumnData">添加字段</el-button>-->
                        <!--                        </div>-->
                    </el-col>
                </el-row>
            </template>

        </jo-el-dialog-form>


        <!-- 表单 -->
        <el-dialog v-model="formShow" :title="formTitle" :width="formWidth">
            <el-form :ref="formRef" :model="formData" label-position="right" :rules="checkRules" label-width="100px">
                <el-row :gutter="15">
                    <el-col :span="12">
                        <el-form-item label="表名" prop="tableName">
                            <el-input v-model="formData.tableName" placeholder="" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="表说明" prop="tableComment">
                            <el-input v-model="formData.tableComment" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-table :data="formData.columnList" header-cell-class-name="jo-el-table-header"
                                  :max-height="tableHeight - 280">
                            <el-table-column type="index" prop="selection" width="50" fixed="left" label="#"
                                             header-align="center" align="center"></el-table-column>
                            <el-table-column prop="columnName" label="字段名" min-width="180"
                                             fixed="left">
                                <template #default="scope">
                                    <div v-if="scope.row.addState">
                                        <el-input v-model="scope.row.columnName" placeholder=""></el-input>
                                    </div>
                                    <div v-else="">{{scope.row.columnName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="remark" label="备注" min-width="180">
                                <template #default="scope">
                                    <div v-if="scope.row.editState">
                                        <el-input v-model="scope.row.remark" placeholder=""></el-input>
                                    </div>
                                    <div v-else="">{{scope.row.remark}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="dataType" label="类型" min-width="110">
                                <template #default="scope">
                                    <div v-if="scope.row.editState">
                                        <el-select v-model="scope.row.dataType" :allow-create="true" :filterable="true">
                                            <el-option :value="col.key" v-for="col in dbColumnTypeList">{{col.value}}
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <div v-else="">{{scope.row.dataType}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="length" label="长度" min-width="80">
                                <template #default="scope">
                                    <div v-if="scope.row.editState">
                                        <el-input v-model="scope.row.length" placeholder=""></el-input>
                                    </div>
                                    <div v-else="">{{scope.row.length}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="columnDefault" label="默认值" min-width="130">
                                <template #default="scope">
                                    <div v-if="scope.row.editState">
                                        <el-input v-model="scope.row.columnDefault" placeholder=""></el-input>
                                    </div>
                                    <div v-else="">{{scope.row.columnDefault}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="notNull" label="非空" min-width="80">
                                <template #default="scope">
                                    <el-switch
                                            v-model="scope.row.notNull"
                                            :active-value="1"
                                            :inactive-value="0"
                                            :disabled="!scope.row.editState"
                                    ></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="primaryKeyFlag" label="主键" min-width="80">
                                <template #default="scope">
                                    <el-tag type="success" v-if="scope.row.primaryKeyFlag">是</el-tag>
                                    <div v-else=""></div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="autoIncrement" label="自增" min-width="80">
                                <template #default="scope">
                                    <el-tag type="success" v-if="scope.row.autoIncrement==1">是</el-tag>
                                    <div v-else=""></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="150" fixed="right">
                                <template #default="scope">
                                    <div v-if="scope.row.editState">
                                        <el-button type="success" link
                                                   size="default"
                                                   @click="updateColumn(scope.row, scope.$index)"

                                        >保存
                                        </el-button>
                                        <el-divider direction="vertical"></el-divider>
                                        <el-button type="info" link
                                                   size="default"
                                                   @click="cancelEdit(scope.row, scope.$index)"

                                        >取消
                                        </el-button>
                                    </div>
                                    <div v-else="">
                                        <el-button type="primary" link
                                                   size="default"
                                                   @click="openEditColumn(scope.row)"

                                        >编辑
                                        </el-button>
<!--                                        <el-divider direction="vertical"></el-divider>-->
<!--                                        <el-button type="danger" link-->
<!--                                                   size="default"-->
<!--                                                   @click="list_delete(scope.row)"-->

<!--                                        >删除-->
<!--                                        </el-button>-->
                                        <el-divider direction="vertical"></el-divider>
                                        <el-button type="primary" link
                                                   size="default"
                                                   @click="addColumnDataForUpdate(scope.$index)"

                                        >
                                            <i class="fa fa-plus"></i>
                                        </el-button>
                                    </div>

                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>


                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close_form">关闭</el-button>
                    <el-button type="primary" @click="form_save" v-if="addSaveBtnShow && addFlag">确认</el-button>
                    <el-button type="primary" @click="form_save"
                               v-else-if="updateSaveBtnShow && editFlag">确认</el-button>
                </span>
            </template>
        </el-dialog>


    </el-scrollbar>
</div>


<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--layer-->
<!--<script src="/static/plugin/layer/layer.js"></script>-->
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<script src="/static/plugin/element-ui/element-ui.js"></script>
<script src="/static/plugin/element-ui/locale/zh-cn.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-adapt-element-plus.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script src="/static/plugin/jo/jo-page-element-plus.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<script src="/static/js/common_biz.js"></script>
<script type="text/javascript">
    // 代码生成按钮事件定义
    window.TEMP_BTN_FUNCTION = {
        methods: {
            // 自定义按钮栏事件 start
            // 自定义按钮栏事件 end

            // 自定义表格行按钮事件 start
            // 自定义表格行按钮事件 end
        }
    };
</script>
<script type="text/javascript">
    // vue参数, 留着给全局js定制用, 如果有需要定制vue参数, 则覆盖TEMP_VUE_PARAM
    window.TEMP_VUE_PARAM = {};

</script>
<script type="text/javascript">
    // vue应用构造
    const app = Vue.createApp(joEl.buildVueAppParam(window.TEMP_VUE_PARAM || {}, {
        data: function () {
            return {
                primaryKey: 'tableName',
                // 表格高度
                tableHeight: 'auto',
                // 表单宽度
                formWidth: '80%',
                // 是否支持更新保存按钮展示
                updateSaveBtnShow: false,
                // 是否支持新增保存按钮展示
                addSaveBtnShow: true,
                // 查询参数
                searchCondition: {},
                // 表格数据url
                tableDataUrl: '/lowcode/db/getTableList',
                // 表单详情查询url
                formQueryUrl: '/lowcode/db/getTableDetail',
                // 新增url
                formInsertUrl: '',
                // 修改url
                formUpdateUrl: '',
                // 删除url
                deleteUrl: '',
                // 校验规则
                checkRules: {
                    tableName: [
                        joEl.rules.required('表名不允许为空', 'blur'),
                    ],
                },
                // 新增表单实例
                addFormIns: {
                    call: {
                        buildData(data) {
                            return {
                                columnList: [
                                    {
                                        columnName: 'id',
                                        dataType: 'bigint',
                                        notNull: 1,
                                        primaryKeyFlag: true,
                                        autoIncrement: 1,
                                        remark: '主键'
                                    },
                                    {
                                        columnName: 'a1',
                                        dataType: 'varchar',
                                        length: 32,
                                        notNull: 0,
                                        columnDefault: '',
                                        remark: '备用1'
                                    },
                                    {
                                        columnName: 'a2',
                                        dataType: 'varchar',
                                        length: 32,
                                        notNull: 0,
                                        columnDefault: '',
                                        remark: '备用2'
                                    },
                                    {
                                        columnName: 'a3',
                                        dataType: 'varchar',
                                        length: 32,
                                        notNull: 0,
                                        columnDefault: '',
                                        remark: '备用3'
                                    },
                                    {
                                        columnName: 'create_time',
                                        dataType: 'datetime',
                                        notNull: 1,
                                        columnDefault: 'CURRENT_TIMESTAMP',
                                        remark: '创建时间'
                                    },
                                    {
                                        columnName: 'update_time',
                                        dataType: 'datetime',
                                        notNull: 1,
                                        columnDefault: 'CURRENT_TIMESTAMP',
                                        remark: '更新时间'
                                    },
                                    {
                                        columnName: 'create_user_id',
                                        dataType: 'bigint',
                                        notNull: 1,
                                        columnDefault: '0',
                                        remark: '创建人id'
                                    },
                                    {
                                        columnName: 'create_user_name',
                                        dataType: 'varchar',
                                        length: 64,
                                        notNull: 1,
                                        columnDefault: 'user',
                                        remark: '创建人名称'
                                    },
                                    {
                                        columnName: 'update_user_id',
                                        dataType: 'bigint',
                                        notNull: 1,
                                        columnDefault: '0',
                                        remark: '更新人id'
                                    },
                                    {
                                        columnName: 'update_user_name',
                                        dataType: 'varchar',
                                        length: 64,
                                        notNull: 1,
                                        columnDefault: 'user',
                                        remark: '更新人名称'
                                    },
                                    {
                                        columnName: 'data_sequence',
                                        dataType: 'bigint',
                                        notNull: 1,
                                        columnDefault: '1',
                                        remark: '数据顺序'
                                    },
                                    {
                                        columnName: 'data_version',
                                        dataType: 'bigint',
                                        notNull: 1,
                                        columnDefault: '1',
                                        remark: '数据版本号'
                                    },
                                    {
                                        columnName: 'trash_flag',
                                        dataType: 'int',
                                        notNull: 1,
                                        columnDefault: '0',
                                        remark: '删除标识,1删除0正常'
                                    },
                                ]
                            };
                        }
                    }
                }
            }
        }
        , computed: {}
        , methods: {
            // 新增表单数据初始化前的处理
            handle_form_init_data_add(data) {
                // 默认值
            },
            // 编辑表单数据初始化前的处理
            handle_form_init_data_edit(data) {
            },

            // 数据区高度适应
            dataBarResize() {
                var total = 0;
                jo.forEach($('.qy-view-data-bar').siblings('.qy-height-resize'), (item) => {
                    var id = item.id;
                    if (id) {
                        total += jo.getDefVal($('#' + id).outerHeight(true), 0);
                    }
                });
                var boxPadding = $('.qy-view-page-content').outerHeight(true) - $('.qy-view-page-content').height();
                var h = $('.qy-view-page-app').height() - boxPadding - total - jo.getDefVal($('.jo-el-table-page-bar').outerHeight(true));
                console.info('更新数据表格高度: %s -> %s', this.tableHeight, h);
                this.tableHeight = h;
            },
            // 数据区监听
            dataBarResizeListener() {
                // 初始计算
                this.dataBarResize();
                // 监听注册
                var arr = $('.qy-view-data-bar').siblings('.qy-height-resize');
                jo.forEach(arr, (item) => {
                    var id = item.id;
                    if (id) {
                        this.registerElementHeightResize('#' + item.id, this.dataBarResize);
                    } else {
                        console.warn('注册数据区高度监听需要兄弟节点有id属性:', item);
                    }
                });
                // 数据区高度变化
                // this.registerElementHeightResize('#qy-view-data-bar', this.dataBarResize);
            },
            // 格式化数据容量大小
            formatDataLength(row, column, cellValue, idx) {
                var dataLength = cellValue || 0;
                if (dataLength && dataLength > 1024 * 1024 * 1024) {
                    return parseFloat((dataLength / 1024 / 1024 / 1024).toFixed(2)) + ' GB';
                } else if (dataLength && dataLength > 1024 * 1024) {
                    return parseFloat((dataLength / 1024 / 1024).toFixed(2)) + ' MB';
                } else if (dataLength && dataLength > 1024) {
                    return parseFloat((dataLength / 1024).toFixed(2)) + ' KB';
                } else {
                    return dataLength + ' B';
                }
            },
            // 更新字段
            updateColumn(column, idx) {
                if (column.addState) {
                    // 新增字段, 校验输入内容
                    if (!jo.assert.valid(column.columnName, '字段名必填')
                        || !jo.assert.valid(column.dataType, '字段类型必填')
                        || !jo.assert.valid(column.tableName, '表名为空')) {
                        return;
                    }
                    jo.postJson('/lowcode/db/addDbColumn', {body: column}).success(json => {
                        jo.showSuccessMsg('新增字段成功~');
                        // 关闭行编辑状态
                        column.editState = false;
                        // 新增字段的话, 更新新增状态
                        column.addState = false;
                    }).error(json => {
                        jo.showErrorMsg(json.info);
                    });
                } else {
                    // 更新字段, 检查是否有变化
                    if (column.remark_old === column.remark &&
                        column.dataType_old === column.dataType &&
                        column.length_old === column.length &&
                        column.columnDefault_old === column.columnDefault &&
                        column.notNull_old === column.notNull) {
                        jo.showTipsMsg('您没有任何修改~');
                        // 关闭行编辑状态
                        column.editState = false;
                        return;
                    }
                    jo.postJson('/lowcode/db/updateDbColumn', {body: column}).success(json => {
                        jo.showSuccessMsg('更新字段成功~');
                        // 关闭行编辑状态
                        column.editState = false;
                    }).error(json => {
                        jo.showErrorMsg(json.info);
                    });
                }
            },
            // 打开编辑
            openEditColumn(column) {
                // 记录老状态
                column.remark_old = column.remark;
                column.dataType_old = column.dataType;
                column.length_old = column.length;
                column.columnDefault_old = column.columnDefault;
                column.notNull_old = column.notNull;
                // 开启编辑状态
                column.editState = true;
            },
            // 取消编辑
            cancelEdit(column, idx) {
                // 如果是待新增字段的取消操作, 则移除该字段
                if (column.addState) {
                    this.formData.columnList.splice(idx, 1);
                    return;
                }
                // 还原字段状态
                column.remark = column.remark_old;
                column.dataType = column.dataType_old;
                column.length = column.length_old;
                column.columnDefault = column.columnDefault_old;
                column.notNull = column.notNull_old;
                // 关闭编辑
                column.editState = false;
            },
            // 新增表
            addTable(data, command) {
                if (!jo.assert.valid(data.tableName, '表名必填') || !jo.assert.notEmpty(data.columnList, '请添加字段')) {
                    return;
                }
                for (let i = 0; i < data.columnList.length; i++) {
                    var item = data.columnList[i];
                    if (!jo.assert.valid(item.columnName, '字段名必填') || !jo.assert.valid(item.dataType, '字段类型必填')) {
                        return;
                    }
                }
                jo.postJson('/lowcode/db/createTable', {body: data}).success(json => {
                    jo.showSuccessMsg('数据库表创建完成~');
                    command.close();
                    this.list_refresh();
                }).error(json => {
                    jo.showErrorMsg(json.info);
                });
            },
            // 新增字段数据for创建表
            addColumnData(idx) {
                var list = this.addFormIns.command.getData().columnList;
                list.splice(idx + 1, 0, {
                    columnName: 'xxx',
                    dataType: 'varchar',
                    length: 32,
                    notNull: 0,
                    columnDefault: '',
                    remark: 'xxx'
                });
            },
            // 移除字段for创建表
            removeColumn(idx) {
                var list = this.addFormIns.command.getData().columnList;
                if (list.length < 2) {
                    jo.showErrorMsg('至少应保留1个字段!');
                    return;
                }
                jo.confirm('您确认要移除该字段?', () => {
                    list.splice(idx, 1);
                });
            },
            // 编辑状态的新增字段
            addColumnDataForUpdate(idx) {
                // 新字段顺序要再哪个字段的下方
                var preCol = this.formData.columnList[idx];
                this.formData.columnList.splice(idx + 1, 0,
                    {
                        tableName: this.formData.tableName,
                        columnName: 'xxx',
                        dataType: 'varchar',
                        length: 32,
                        notNull: 0,
                        columnDefault: '',
                        remark: 'xxx',
                        editState: true,
                        addState: true,
                        afterColumn: preCol ? preCol.columnName : '',
                    });
            }
        }
        , mounted() {
            // 数据区大小监听
            this.dataBarResizeListener();
        }
        , setup() {

        }
    }, window.TEMP_BTN_FUNCTION || {}, joEl.VUE_COMMON_VIEW, joEl.VUE_COMMON));
    app.use(ElementPlus, {locale: ElementPlusLocaleZhCn});
    app.use(joEl);

    var appVM = app.mount("#app");
</script>

</body>
</html>
